<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    {% for jsfile_name in script_list %}
    <!--<script src="{{ host }}/{{ jsfile_name }}.js"></script>-->
    <script src="{{ url_for('static', filename=jsfile_name)}}.js"></script>
    {% endfor %}

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>


<body>

<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>Welcome to Dvr Monitor Center</h1>
    </div>

    <div data-role="content" style="text-align: center">
        <div data-role="controlgroup" data-type="horizontal">
            <input type="text" id="ip_text">

            <button id="adbConnect" class="ui-btn ui-icon-plus ui-btn-icon-left">Connect</button>
            <button id="adbDisconnect" class="ui-btn ui-icon-minus ui-btn-icon-left">Disconnect</button>
            <select name="select-native-11" id="select-devices">
                <option>Drop-down Selection</option>
            </select>
            <button id="startMonitor" class="ui-btn ui-icon-check ui-btn-icon-left">Start Monitor</button>
            <button id="stopMonitor" class="ui-btn ui-icon-delete ui-btn-icon-left">Stop Monitor</button>
            <a href="#popupLogin" data-rel="popup" data-position-to="window"
               class="ui-btn ui-icon-bullets ui-btn-icon-left"
               data-transition="pop">Help</a>
            <label id="normalizeData">
                <input type="checkbox" id="btnnormalizeData">Normalize Data</input>
            </label>
        </div>

        <div id="pyEcharts" style="width:1000px;height:400px;text-align: center"></div>
    </div>

    <div data-role="footer">
        <h1>Footer</h1>
    </div>
    <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
        <form>
            <div style="padding:10px 20px;">
                <h3>Help Infomation</h3>

                <h4>1. Connect DVR to Wifi spot, So that host pc can reach it.<br/></h4>
                SSID:Skysoft-public<br/>
                PASS:Skysoft123!@#)<br/>
                <h4>2. Set DVR to tcpip mode.<br/></h4>
                Connect DVR to PC via usb, execute "adb tcpip 5555" in command line.<br/>
                <h4>3. Find DVR's ip address.<br/></h4>
                "adb shell ifconfig"<br/>
                <h4>4. Make sure that other pc can reach it.<br/></h4>
                "adb connect x.x.x.x"<br/>

            </div>
        </form>
    </div>
</div>


<script type="text/javascript">
    function checkIP(val)  {
        var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        var reg = val.match(exp);
        if(reg==null) {
            alert("IP address is illegal！");
            return false;
        } else {
            return true;
        }
    }

    $(document).ready(function(){
        $("#adbConnect").click(
            function() {
                var ip = $("#ip_text").val();
                var ret = checkIP(ip);
                if (ret) {
                    chat.emit('command',{cmd:'adbConnect', DeviceIp:ip});
                }
            }
        )

        $("#adbDisconnect").click(
            function() {
                var ip = $("#ip_text").val();
                var ret = checkIP(ip);
                if (ret) {
                    chat.emit('command',{cmd:'adbDisconnect', DeviceIp:ip});
                }
            }
        )

        $("#startMonitor").click(
            function() {
                var ip = $("#select-devices").val();
<!--                var ret = checkIP(ip);-->
                var ret = true;
                if (ret) {
                    chat.emit('command',{cmd:'startMonitor', DeviceIp:ip});
                }
            }
        );

        $("#stopMonitor").click(
            function() {
                chat.emit('command',{cmd:'stopMonitor'});
            }
        );

        $("#btnnormalizeData").click(
            function() {
                chat.emit('command',{cmd:'normalizeData', data: $("#btnnormalizeData").is(':checked')});
            }
        );

        var url = 'http://' + document.domain + ':' + location.port;
        var chat = io.connect(url + '/chat');

        chat.on('connect', function() {
            console.log('[connect] hi connected.');
            chat.emit('info', {k:'hi connected.'});
            chat.emit('command',{cmd:'monitorState'});
            chat.emit('command',{cmd:'getAdbDevices'});
            chat.emit('command',{cmd:'getNormalizeData'});
        });

        chat.on('getAdbDevices', function (data){
            $("#select-devices").empty();
            for (var i = 0; i < data.length; i++) {
                $("#select-devices").append("<option>"+ data[i] +"</option>");
            }
            $("#select-devices").first().attr("selected", true);
        });

        chat.on('getNormalizeData', function (data){
            $("#btnnormalizeData").attr('checked', data);

            if(data == true) {
                $("#normalizeData").attr('class',"ui-btn ui-corner-all ui-btn-inherit ui-last-child ui-btn-active ui-checkbox-on");
            } else {
                $("#normalizeData").attr('class',"ui-btn ui-corner-all ui-btn-inherit ui-last-child ui-checkbox-off");
            }
        });

        chat.on('getConnectedIpAddress', function (data){
            $("#ip_text").attr("placeholder","Connected to device: " + data);
            $("#ip_text").attr("disabled",true);
            $("#ip_text").attr("readOnly",true);
        });

        chat.on('monitorState', function (data){
            $("#ip_text").val("");

            if ('Stopped' == data) {
                $("#ip_text").attr("placeholder","Please enter DVR's IP address.");
                $("#ip_text").attr("disabled",false);
                $("#ip_text").attr("readOnly",false);
            } else {
                chat.emit('command',{cmd:'getConnectedIpAddress'});
            }
        });

        chat.on('chart_update', function (data){
            eval(data)
            myChart.setOption(op);
        });

        var myChart = echarts.init(document.getElementById('pyEcharts'), 'light', {renderer: 'canvas'});
    });









































































































</script>

</body>

</html>